@import "./base.css";

body {
  // height: 900px;
  //   width: 100%;
  // background: pink;
  background-image: url(../img/云上田野网页切图/1首页切图/bg.png);
  background-size: 100% 100%;
}

.bg {
  //   height: 100%;
  width: 100%;
}

.top_nav {
  height: 105px;
  background: url(../img/云上田野网页切图/1首页切图/头部BG.png) 50% 100%;
  padding: 10px 10px;
  box-sizing: border-box;
  padding-left: 121px;
  margin-bottom: 20px;
  position: relative;
}

// 顶部通栏
.greenhouse {
  height: 58px;
  width: 173px;
  background: rgba(10, 255, 232, 0.2);
  font-size: 22px;
  color: #0affe8;
  line-height: 58px;
  text-align: center;
  border-radius: 5px;
  box-sizing: border-box;
  display: inline-block;

  .triangle {
    margin-left: 10px;
    display: inline-block;
    width: 21px;
    height: 18px;
    background: url(../img/云上田野网页切图/1首页切图/sanjiao.png);
  }
}

.zhandian1 {
  // display: inline-block;
  width: 142px;
  height: 56px;
  border: 1px solid #0affe8;
  font-size: 22px;
  text-align: center;
  line-height: 56px;
  color: #0affe8;
  border-radius: 5px;
  margin-left: 26px;
}

.title {
  font-size: 40px;
  color: #0affe8;
  //   margin: 30px 0px 0px 60px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  //   transform: translate(42%, 42%);
}

.tuichu {
  width: 92px;
  height: 56px;
  border: 1px solid #0affe8;
  font-size: 22px;
  text-align: center;
  line-height: 56px;
  color: #0affe8;
  border-radius: 5px;
  margin-right: 109px;
}

.username {
  color: #0affe8;
  font-size: 22px;
  line-height: 56px;
  margin-right: 50px;

  .user_header {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: pink;
    border-radius: 50%;
    margin-right: 10px;
  }
}

// 主体部分 flex布局
.main {
  padding: 0px 20px;

  display: flex;
  justify-content: space-between;

  .mid_box {
    // background: pink;
    // flex: 1;
    // width: 707px;.
    flex: 1;

    margin: 0px 10px;
    margin-top: -15px;
  }

  .left_box,
  .rig_box {
    // width: 563px;
    // height: 278px;
    // flex: 20%;
    width: 30%;
  }
}

// 全屏按钮
.full_screen {
  position: absolute;
  right: 6px;
  top: 6px;
  display: inline-block;
  height: 21px;
  width: 21px;
  background: url(../img/云上田野网页切图/1首页切图/报警日志/全屏.png);
}

// 左半边部分
.ss_data {
  box-sizing: border-box;
  padding: 0px 20px 15px;
  width: 100%;
  // height: 278px;
  background: url(../img/云上田野网页切图/1首页切图/实时数据/实时数据底框.png) no-repeat;
  background-size: 100% 100%;
  position: relative;

  canvas {
    width: 100%;
  }

  // padding-left: 10px;
  .ss_data_header {
    // margin-top: 26px;
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 13px;

    .list_child {
      margin: 4px;
      max-width: 240px;
      flex: 40%;
      height: 88px;
      background: url(../img/云上田野网页切图/1首页切图/实时数据/bg.png);
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      padding: 10px;

      //   box-sizing: border-box;
      img {
        height: 100%;
        // flex: 1;
        padding-left: 20px;
        box-sizing: border-box;
      }

      .detail {
        flex: 1;

        font-size: 22px;
        color: #0affe8;
        text-align: center;
      }
    }
  }
}

// 通用.left
.left {
  padding: 4px;
  border-radius: 5px;
  text-align: center;
  font-size: 20px;
  background: url(../img/云上田野网页切图/1首页切图/实时数据/采集器BG.png);
  background-size: 100% 100%;
  margin-right: 20px;
}

.right {
  font-size: 24px;
  border-left: 7px solid #0affe8;
  padding-left: 10px;
}

.right,
.left {
  color: #0affe8;
}

// 数据可视化部分

.data_analysis {
  position: relative;
  margin-top: 20px;
  height: 346px;
  width: 100%;
  background-image: url(../img/云上田野网页切图/1首页切图/数据分析/底框.png);
  padding: 0px 20px;

  .ss_data_header {
    // margin-top: 26px;
    padding-top: 22px;
    display: flex;
    justify-content: space-between;

    .right,
    .left {
      color: #0affe8;
    }

    .right {
      font-size: 24px;
      border-left: 7px solid #0affe8;
      padding-left: 10px;
    }
  }

  #main {
    height: 90%;
    width: 100%;
  }
}

// 左侧盒子第三部分
.warning {
  position: relative;
  padding: 0px 20px;

  margin-top: 20px;
  // height: 270px;
  width: 100%;
  background: url(../img/云上田野网页切图/1首页切图/数据分析/底框.png);
  background-size: 100% 100%;

  .detail_list {

    // display: flex;
    img {
      width: 100%;
    }

    p {
      display: inline-block;
      color: #fff;
      //   height: 60px;
      margin: 11px 0;
    }

    i {
      a {
        color: #0affe8;
        text-align: center;
        line-height: 36px;
        display: inline-block;
        width: 74px;
        height: 36px;
        background: url(../img/云上田野网页切图/1首页切图/报警日志/查看bg.png);
        font-size: 18px;
        margin-left: 10px;
      }
    }
  }
}

.ss_data_header {
  // margin-top: 26px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
}

// 中间地图api
.mid_box {
  height: 553px;
  background-image: url(../img/云上田野网页切图/1首页切图/地图/地图.png);

  #allmap {
    height: 100%;
  }

  // 站点视频
  .video_box {
    margin-top: 20px;
    height: 368px;
    width: 100%;
    background-image: url(../img/云上田野网页切图/1首页切图/视频/视频.png);
    position: relative;

    a {
      position: absolute;
      display: inline-block;
      width: 25px;
      height: 44px;
      top: 50%;
      transform: translate(50%, -50%);
    }

    :first-child {
      background-image: url(../img/云上田野网页切图/1首页切图/视频/左.png);
    }

    :last-child {
      right: 25px;
      background-image: url(../img/云上田野网页切图/1首页切图/视频/右.png);
    }
  }
}

// 右侧盒子
// 天气预报部分
.location_box {
  height: 96px;
  width: 100%;
  background-image: url(../img/云上田野网页切图/1首页切图/天气预报/底框.png);
  display: flex;
  align-items: center;
  justify-content: space-around;

  .switch_city {
    display: flex;

    a,
    span,
    i {
      margin-left: 14px;
    }

    a {
      font-size: 18px;
      color: #0393e5;
    }

    span {
      font-size: 24px;
      color: #fff;
    }

    i {
      display: inline-block;
      width: 22px;
      height: 29px;
      background: url(../img/云上田野网页切图/1首页切图/天气预报/椭圆-4-拷贝@3x.png);
      background-size: 100% 100%;
    }
  }

  .times_now {
    display: flex;
    align-items: center;

    i {
      width: 73px;
      height: 73px;
      background: url(../img/云上田野网页切图/1首页切图/天气预报/晴.png);
    }

    .detail_box {
      p {
        color: #fff;
        margin: 12px;
      }
    }
  }
}

// 设备状态部分
.status_box {
  position: relative;
  padding: 0px 20px 20px;
  margin-top: 20px;
  // height: 473px;
  width: 100%;
  background-image: url(../img/云上田野网页切图/1首页切图/设备状态/底框.png);

  .status_list {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .lists_s {
      background-image: url(../img/云上田野网页切图/1首页切图/实时数据/bg.png);
      background-size: 100% 100%;
      // width: 240px;
      flex: 48%;
      height: 173px;
      //   margin: 10px;
      margin: 4px;
      color: #0affe8;
      padding: 10px;
      box-sizing: border-box;

      .d_type {
        font-size: 22px;
      }

      p {
        font-size: 20px;

        i {
          height: 16px;
          width: 16px;
          background-image: yellow;
          border-radius: 50%;
          margin: 0px 10px;
        }
      }
    }
  }
}

// 农业管理
.management {
  padding: 0px 20px 20px;
  position: relative;
  margin-top: 20px;
  width: 100%;
  // height: 300px;
  background-image: url(../img/云上田野网页切图/1首页切图/农事管理/底框.png);
  background-size: 100% 100%;

  .history {
    background-image: url(../img/云上田野网页切图/1首页切图/农事管理/添加记录BG、.png);

    a {
      padding: 4px;
      border-radius: 5px;
      text-align: center;
      font-size: 20px;
      background-size: 100% 100%;
    }
  }

  ul {
    li {
      display: flex;
      line-height: 45px;
      // list-style: disc;
      color: #0affe8;

      p {
        margin-right: 16px;
        max-width: 300px;
        width: 100%;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    margin-top: 10px;
    font-size: 14px;
  }

  li::before {
    content: "";
    // i {
    width: 10px;
    height: 10px;
    background-color: #0affe8;
    border-radius: 50%;
    margin-top: 18px;
    margin-right: 18px;
    // }
  }
}

.tanchuceng {
  display: none;
  width: 200px;
  height: 200px;
  background-color: pink;
}

// 弹出层关闭按钮
.ss_if_main .esc_btn {
  cursor: pointer;
  position: absolute;
  right: -20px;
  top: 20px;
  width: 46px;
  height: 46px;
  background-image: url(../img/云上田野网页切图/实时数据/关闭.png);
}

// 实时数据炭初曾
.ss_data_if {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  display: none;

  width: 100%;
  background-image: url(../img/云上田野网页切图/实时数据/bg.png);

  .ss_if_main {
    padding: 120px 40px 0px;
    width: 1300px;
    // height: 762px;
    min-height: 762px;
    background-image: url(../img/云上田野网页切图/实时数据/矩形-3.png);
    // background-size: 100%;
    .poa_t50();

    // .dw_box {
    //   position: relative;
    // }
    .data_list>li {
      margin: 40px 0px 52px 0px;

    }

    h1 {
      font-size: 50px;
      color: #fff;
      position: absolute;
      left: 50%;
      top: 6%;
      transform: translate(-50%, -50%);
    }

    // 橫框一
    .fir_horizontal {
      width: 100%;
      height: 71px;
      background-image: url(../img/云上田野网页切图/实时数据/横框.png);
      padding: 20px 50px;

      span {
        font-size: 24px;
        color: #0affe8;
      }

      i {
        cursor: pointer;
        background-image: url(../img/云上田野网页切图/实时数据/三角.png);
        width: 27px;
        height: 24px;
      }
    }
  }

  .ss_data_main {
    height: 446px;
    width: 100%;
    background-image: url(../img/云上田野网页切图/实时数据/矩形-2.png);
    padding: 29px 36px;

    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      // margin-bottom: 20px;
      li {
        height: 160px;
        width: 350px;
        background-image: url(../img/云上田野网页切图/实时数据/01bg.png);
        background-size: 100% 100%;
        margin-bottom: 67px;
        display: flex;
        // align-items: center;
        padding: 40px 40px 22px 32px;
        box-sizing: border-box;

        div:nth-child(1) {
          flex: 1;
          text-align: center;

          // line-height: 160px;
          img {
            width: 67%;
          }
        }

        div:nth-child(2) {
          flex: 1;
          text-align: center;
          line-height: 46px;
          font-size: 26px;
          color: #0affe8;
        }
      }
    }
  }


}

// 数据分析弹出层
.data_analysis_if {
  display: none;

  .data_if_main {
    width: 1200px;

    .first_line {
      display: flex;

      .switch_button {
        cursor: pointer;
        width: 177px;
        height: 63px;
        background-image: url(../img/云上田野网页切图/数据分析切图/选项框bg.png);
        .text_tac()
      }

      ul {

        li {
          cursor: pointer;
          display: inline-block;
          width: 112px;
          height: 63px;
          background-image: url(../img/云上田野网页切图/数据分析切图/01bg.png);
          background-size: 100% 100%;
          margin-left: 30px;
          .text_tac()
        }

        :nth-child(3) {
          background-image: url(../img/云上田野网页切图/数据分析切图/选项框bg.png)
        }
      }
    }

    .second_line {
      margin-top: 40px;
      display: flex;

      ul {
        display: flex;

        li {
          height: 50px;
          line-height: 50px;
          margin-left: 20px;
        }

        .str_time,
        .end_time {
          // padding: 18px;
          width: 194px;
          box-sizing: border-box;

          background-image: url(../img/云上田野网页切图/数据分析切图/选项框bg.png);
          background-size: 100% 100%;
          font-size: 20px;
        }
      }

      .btn_cx {
        cursor: pointer;
        width: 148px;
        height: 58px;
        line-height: 58px;
        background-image: url(../img/云上田野网页切图/数据分析切图/btnbg.png);
        margin-top: -5px;
        margin-left: 42px;
        .size();
      }

      .text_tac();

    }

    .data_echatrs {
      height: 536px;
      width: 1080px;
    }
  }
}

// 通用背景百分百
.size {
  background-size: @size;
}

@size: 100% 100%;

// 通用垂直居中
.poa_t50 {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}

// 通用文字居中
.text_tac {
  color: #0affe8;
  font-size: 24px;
  text-align: center;
  line-height: 63px;
}